<!DOCTYPE html>
<html>
	<head>
		<title>bootstrap</title>
		<!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="" />
		
		<link type="text/css" rel="stylesheet" media="all" href="${basePath}/bootstrap-3.3.6-dist/css/bootstrap.css" >
		<link type="text/css" rel="stylesheet" media="all" href="${basePath}/css/style.css" >
		<link type="text/css" rel="stylesheet" href="${basePath}/css/lightbox.css">
		
		<script type="application/x-javascript">
			 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
		</script>
		<!-- //Custom Theme files -->
		<!-- js -->
		<script src="${basePath}/js/jquery-1.11.1.min.js"></script>
		<!-- //js -->
	<!--animate-->
	<link rel="stylesheet" type="text/css" media="all" href="${basePath}/css/animate.css">
	<script src="${basePath}/js/wow.min.js"></script>
	<script>
		new WOW().init();
	</script>
	<!--//end-animate-->
	<!-- image-hover -->
	<script type="text/javascript" src="${basePath}/js/mootools-yui-compressed.js"></script>
	<!-- //image-hover -->
	<link href='http://fonts.useso.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,700,700italic'
		rel='stylesheet' type='text/css'>
	<link
		href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
		rel='stylesheet' type='text/css'>
	</head>
<body>
	<!--header-->
	<div class="header">
		<div class="container">
			<div class="header-info navbar-left wow fadeInLeft animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<p>
					<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
					个人电话 : 17701056030
				</p>
			</div>
			<form class="navbar-form navbar-right wow fadeInRight animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="请输入搜索内容">
					<button type="submit" class="btn btn-default"
						aria-label="Left Align">
						<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
					</button>
				</div>
			</form>
		</div>
	</div>
	<!--//header-->
	<!--navigation-->
	<div class="top-nav">
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<h1>
						<a class="navbar-brand wow bounceIn animated" data-wow-delay=".5s"
							style="visibility: visible; -webkit-animation-delay: .5s;"
							href="index.html">博客</a>
					</h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-left">
						<li class="hvr-bounce-to-bottom active"><a href="index.html">Photo
								Gallery</a></li>
						<li class="hvr-bounce-to-bottom"><a href="wedding.html">Wedding</a></li>
						<li class="hvr-bounce-to-bottom"><a href="sports.html">Sports</a></li>
						<li class="hvr-bounce-to-bottom"><a href="industrial.html">Industrial</a></li>
						<li class="hvr-bounce-to-bottom"><a href="fashion.html">Fashion</a></li>
						<li class="hvr-bounce-to-bottom"><a href="agriculture.html">Agriculture</a></li>
					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
		</nav>
	</div>
	<!--navigation-->
	<!--banner-->
	<div class="banner">
		<div class="banner-title">
			<div class="container">
				<div id="top" class="callbacks_container">
					<ul class="rslides" id="slider3">
						<li>
							<div class="banner-text">
								<h2>Welcome to Photography</h2>
								<p>Donec vitae tellus non sem vulputate cursus. Aliquam erat
									volutpat. Proin ut est et sem rhoncus fringilla laoreet</p>
								<a class="more scroll" href="#about"> Read More</a>
							</div>
						</li>
						<li>
							<div class="banner-text">
								<h3>Beyond The Frame</h3>
								<p>Vitae Deonec tellus non sem vulputate cursus. Aliquam
									erat volutpat. Proin ut est et sem rhoncus fringilla laoreet</p>
								<a class="more scroll" href="#about"> Read More</a>
							</div>
						</li>
						<li>
							<div class="banner-text">
								<h3>We Give Best Photograph</h3>
								<p>Sem donec vitae tellus non vulputate cursus. Aliquam erat
									volutpat. Proin ut est et sem rhoncus fringilla laoreet</p>
								<a class="more scroll" href="#about"> Read More</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--//banner-->
	<!--about-->
	<div class="about" id="about">
		<div class="container">
			<h3 class="title">
				Welcome to <span>Snapshot</span>
			</h3>
			<div class="col-md-4 about-left wow fadeInLeft animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<img src="${basePath}/images/img7.jpg" alt="" class="img-responsive" />
			</div>
			<div class="col-md-8 about-right wow fadeInRight animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<h4>Contrary to popular belief, Lorem Ipsum is not simply
					random text. It has roots in a piece of classical Latin established
					fact that a reader will be distracted Lorem Ipsum when looking at
					its layout.</h4>
				<p>Lorem Ipsum was popularised in the 1960s with the release of
					Letraset sheet content of a page when looking at its layout The
					point of using Lorem Ipsum is that it has a more-or-less normal
					distribution is that it has a more of letters, as opposed to using
					'Content here, content here', making it look like readable English.
					Many desktop publishing packages and web page editors now.</p>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//about-->
	<!-- about-bottom -->
	<div class="about-bottom">
		<div class="container">
			<div class="about-bottom-grid">
				<h3>Photographer</h3>
				<p>Many desktop publishing packages and web page editors now.</p>
				<ul class="social-networks square spin-icon">
					<li><a href="#" class="icon-linkedin"></a></li>
					<li><a href="#" class="icon-twitter"></a></li>
					<li><a href="#" class="icon-facebook"></a></li>
				</ul>
			</div>
			<div class="about-bottom-grid1">
				<div class='thumb'>
					<div class='someContent'>
						<div class='content'>This reminds me of a goldfish in a big
							blue sea. Beautiful color contrasts.</div>
					</div>
					<div class='divLeft' style='left: 0px'>
						<div class='divLeftImage'
							style='background: url(images/1.jpg) -89px 0px;'></div>
						<div class='divLeftShadow'></div>
					</div>
					<div class='divRight'
						style='left: 0px; background-image: url(images/1.jpg);'></div>
				</div>
			</div>
			<div class="about-bottom-grid1">
				<div class='thumb'>
					<div class='someContent'>
						<div class='content'>This reminds me of a goldfish in a big
							blue sea. Beautiful color contrasts.</div>
					</div>
					<div class='divLeft' style='left: 0px'>
						<div class='divLeftImage'
							style='background: url(images/2.jpg) -89px 0px;'></div>
						<div class='divLeftShadow'></div>
					</div>
					<div class='divRight'
						style='left: 0px; background-image: url(images/2.jpg);'></div>
				</div>
			</div>
			<div class="about-bottom-grid1">
				<div class='thumb'>
					<div class='someContent'>
						<div class='content'>This reminds me of a goldfish in a big
							blue sea. Beautiful color contrasts.</div>
					</div>
					<div class='divLeft' style='left: 0px'>
						<div class='divLeftImage'
							style='background: url(images/3.jpg) -89px 0px;'></div>
						<div class='divLeftShadow'></div>
					</div>
					<div class='divRight'
						style='left: 0px; background-image: url(images/3.jpg);'></div>
				</div>
			</div>
			<div class="clearfix"></div>
			<script type="text/javascript">
				window.addEvent('domready', function() {
					$$('div.thumb').each(
							function(div) {

								div.getElement('div.someContent').set('tween',
										{
											duration : '700'
										});
								div.getElement('div.divLeft').set('tween', {
									duration : '450'
								});
								div.getElement('div.divRight').set('tween', {
									duration : '450'
								});

								div.addEvent('mouseenter', function(e) {
									this.getElement('div.divLeft').tween(
											'left', '-70px')
									this.getElement('div.divRight').tween(
											'left', '80px')
									this.getElement('div.someContent').tween(
											"background-position", "40px 0px");
								})
								div.addEvent('mouseleave', function(e) {
									this.getElement('div.divLeft').tween(
											'left', '0px')
									this.getElement('div.divRight').tween(
											'left', '0px')
									this.getElement('div.someContent')
											.tween("background-position",
													"0px -167px");

								})
							})
				})
			</script>

		</div>
	</div>
	<!-- //about-bottom -->
	<!--team-->
	<div class="team" id="team">
		<div class="container">
			<h3 class="title title1">
				Meet Our <span>Team</span>
			</h3>
			<div class="team-info">
				<div class="col-md-3 team-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<ul class="social-networks square spin-icon team-icons">
						<li><a href="#" class="icon-linkedin"></a></li>
						<li><a href="#" class="icon-twitter"></a></li>
						<li><a href="#" class="icon-facebook"></a></li>
					</ul>
					<a href="#"> <img class="img-responsive" src="images/img8.jpg"
						alt="" />
						<div class="captn">
							<h4>Gem Parker</h4>
							<p>Aenean puivinar ac enimet posuere tincidunt velit Utin
								tincidunt</p>
						</div>
					</a>
				</div>
				<div class="col-md-3 team-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<ul class="social-networks square spin-icon team-icons">
						<li><a href="#" class="icon-linkedin"></a></li>
						<li><a href="#" class="icon-twitter"></a></li>
						<li><a href="#" class="icon-facebook"></a></li>
					</ul>
					<a href="#"> <img class="img-responsive" src="images/img9.jpg"
						alt="" />
						<div class="captn">
							<h4>Kerl Paul</h4>
							<p>Aenean puivinar ac enimet posuere tincidunt velit Utin
								tincidunt</p>
						</div>
					</a>
				</div>
				<div class="col-md-3 team-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<ul class="social-networks square spin-icon team-icons">
						<li><a href="#" class="icon-linkedin"></a></li>
						<li><a href="#" class="icon-twitter"></a></li>
						<li><a href="#" class="icon-facebook"></a></li>
					</ul>
					<a href="#"> <img class="img-responsive" src="images/img10.jpg"
						alt="" />
						<div class="captn">
							<h4>James Cam</h4>
							<p>Aenean puivinar ac enimet posuere tincidunt velit Utin
								tincidunt</p>
						</div>
					</a>
				</div>
				<div class="col-md-3 team-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<ul class="social-networks square spin-icon team-icons">
						<li><a href="#" class="icon-linkedin"></a></li>
						<li><a href="#" class="icon-twitter"></a></li>
						<li><a href="#" class="icon-facebook"></a></li>
					</ul>
					<a href="#"> <img class="img-responsive" src="images/img11.jpg"
						alt="" />
						<div class="captn">
							<h4>Adam Laura</h4>
							<p>Aenean puivinar ac enimet posuere tincidunt velit Utin
								tincidunt</p>
						</div>
					</a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//team-->
	<!--special-->
	<div class="special">
		<div class="container">
			<div class="col-md-5 special-grids wow fadeInLeft animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<h3>Our Specialization</h3>
				<p>At vero eos et accusamus et iusto odio dignissimos ducimus
					qui blanditiis praesentium voluptatum deleniti atque corrupti quos
					dolores et quas molestias excepturi sint occaecati cupiditate non
					provident.</p>
				<h6>Our facilities</h6>
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="60"
						aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
						60%</div>
				</div>
				<h6>Experienced staff</h6>
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="80"
						aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
						80%</div>
				</div>
				<h6>Free consultations</h6>
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="90"
						aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
						90%</div>
				</div>
				<h6>Advanced lab tests</h6>
				<div class="progress">
					<div class="progress-bar" role="progressbar" aria-valuenow="75"
						aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
						75%</div>
				</div>
			</div>
			<div class="col-md-7 special-grids wow fadeInRight animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<h3>What We do</h3>
				<div class="embed-responsive embed-responsive-16by9">
					<iframe src="https://player.vimeo.com/video/25503274"
						webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//special-->
	<!--services-->
	<div class="services" id="services">
		<div class="container">
			<h3 class="title">
				Special Offered <span>Services</span>
			</h3>
			<div class="row work-row">
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>labore et dolore magna</h4>
						<p>Vero eos et accusamus et iusto odio dignissimos ducimus</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>dignissimos ducimus</h4>
						<p>Vero eos et accusamus et iusto odio dignissimos ducimus</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-print" aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>accusamus et iusto</h4>
						<p>Vero eos et accusamus et iusto odio dignissimos ducimus</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-facetime-video"
							aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>quo voluptas nulla</h4>
						<p>odioero eos et accusamus et iusto dignissimos ducimus</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>occaecat cupidatat non</h4>
						<p>odioero eos et accusamus et iusto dignissimos ducimus</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 work-row-grids wow bounceIn animated"
					data-wow-delay=".5s"
					style="visibility: visible; -webkit-animation-delay: .5s;">
					<div class="work-grids-img">
						<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
					</div>
					<div class="caption work-captn">
						<h4>fugiat nulla pariatur</h4>
						<p>odioero eos et accusamus et iusto dignissimos ducimus</p>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--//services-->
	<!--portfolio-->
	<div class="portfolio" id="gallery">
		<div class="container">
			<h3 class="title">
				Snapshot <span>Photo Gallery</span>
			</h3>
			<div class="portfolio-grids">
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img2.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img2.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img3.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img3.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img4.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img4.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img5.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img5.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img6.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img6.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img7.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img7.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img4.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img4.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img1.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img1.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="col-md-4 port-grids view view-fourth">
					<a class="example-image-link" href="${basePath}/images/img5.jpg"
						data-lightbox="example-set" data-title=""> <img
						src="${basePath}/images/img5.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<p>Duis aute irure dolor in reprehenderit in voluptate velit
								cillum dolore fugiat.</p>
						</div>
					</a>
				</div>
				<div class="clearfix"></div>
				<script src="${basePath}/js/lightbox-plus-jquery.min.js">
					
				</script>
			</div>
		</div>
	</div>
	<!--//portfolio-->
	<!--testimonials-->
	<div class="testimonials">
		<div class="container">
			<h3 class="title">
				Snapshot <span>Testimonials</span>
			</h3>
			<div class="sap_tabs">
				<div id="horizontalTab"
					style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list wow bounceIn animated"
						data-wow-delay=".5s"
						style="visibility: visible; -webkit-animation-delay: .5s;">
						<li class="resp-tab-item"><span><img
								src="${basePath}/images/img12.jpg" alt="" /></span></li>
						<li class="resp-tab-item"><span><img
								src="${basePath}/images/img13.jpg" alt="" /></span></li>
						<li class="resp-tab-item"><span><img
								src="${basePath}/images/img14.jpg" alt="" /></span></li>
					</ul>
					<div class="clearfix"></div>
					<div class="resp-tabs-container wow bounceIn animated"
						data-wow-delay=".5s"
						style="visibility: visible; -webkit-animation-delay: .5s;">
						<div class="tab-1 resp-tab-content">
							<div class="view1 view-first">
								<h5>FILAN FISTEKU</h5>
								<p>Donec libero dui, scelerisque ac augue id, tristique
									ullamcorper elit. Nam ultrices, lacus vitae adipiscing aliquet,
									metus ipsum imperdiet libero, vitae dignissim sapien diam ac
									nibh convallis.</p>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="view1 view-first">
								<h5>ULLAMCORPER FILAN</h5>
								<p>Scelerisque ac augue id Donec libero dui, , tristique
									ullamcorper elit. Nam ultrices, lacus vitae adipiscing aliquet,
									metus ipsum imperdiet libero, vitae dignissim sapien diam ac
									nibh convallis.</p>
							</div>
						</div>
						<div class="tab-1 resp-tab-content">
							<div class="view1 view-first">
								<h5>SCELERISQUE AUGUE</h5>
								<p>Nam ultrices lacus vitae adipiscing aliquet, metus ipsum
									imperdiet libero, vitae dignissim sapientristique Donec libero
									dui, scelerisque ac augue id, ullamcorper elit,diam ac nibh
									convallis.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="${basePath}/js/easyResponsiveTabs.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#horizontalTab').easyResponsiveTabs({
					type : 'default', //Types: default, vertical, accordion           
					width : 'auto', //auto or any width like 600px
					fit : true
				// 100% fit in a container
				});
			});
		</script>
	</div>
	<!--//testimonials-->
	<!--contact-->
	<div id="contact" class="contact-form pt-section">
		<div class="container">
			<h3 class="title">
				Find Us <span>On Map</span>
			</h3>
			<div class="col-md-7 contact-right wow fadeInLeft animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<form>
					<input type="text" value="Name" onfocus="this.value = '';"
						onblur="if (this.value == '') {this.value = 'Name';}" required="">
					<input type="email" value="Email" onfocus="this.value = '';"
						onblur="if (this.value == '') {this.value = 'Email';}" required="">
					<input type="text" value="Telephone" onfocus="this.value = '';"
						onblur="if (this.value == '') {this.value = 'Telephone';}"
						required="">
					<textarea onfocus="this.value = '';"
						onblur="if (this.value == '') {this.value = 'Message...';}"
						required="">Message...</textarea>
					<input type="submit" value="Submit">
				</form>
			</div>
			<div class="col-md-5 contact-left wow fadeInRight animated"
				data-wow-delay=".5s"
				style="visibility: visible; -webkit-animation-delay: .5s;">
				<p>"Lorem Ipsum"is the common name dummy text often used in the
					design, printing, and type setting industriescommon name dummy text
					often used in the design, printing, and type setting industries. "</p>
				<ul>
					<li><span class="glyphicon glyphicon-map-marker"
						aria-hidden="true"></span>756 global Place, New York.</li>

					<li><span class="glyphicon glyphicon-envelope"
						aria-hidden="true"></span><a href="mailto:example@mail.com">mail@example.com</a></li>
					<li><span class="glyphicon glyphicon-earphone"
						aria-hidden="true"></span></span>+123 2222 222</li>
				</ul>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!--//contact-->
	<!--footer-->
	<div class="footer wow fadeInRight animated" data-wow-delay=".5s"
		style="visibility: visible; -webkit-animation-delay: .5s;">
		<div class="container">
			<p>
				Copyright &copy; 2016.Company name All rights reserved.<a
					target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
			</p>
		</div>
	</div>
	<!--//footer-->
	<!-- banner-text Slider starts Here -->
	<script src="${basePath}/js/responsiveslides.min.js"></script>
	<script>
		// You can also use "$(window).load(function() {"
		$(function() {
			// Slideshow 3
			$("#slider3").responsiveSlides({
				auto : true,
				pager : true,
				nav : true,
				speed : 500,
				namespace : "callbacks",
				before : function() {
					$('.events').append("<li>before event fired.</li>");
				},
				after : function() {
					$('.events').append("<li>after event fired.</li>");
				}
			});
		});
	</script>
	<!--//End-slider-script -->
	<!-- start-smoth-scrolling-->
	<script type="text/javascript" src="${basePath}/js/move-top.js"></script>
	<script type="text/javascript" src="${basePath}/js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!--//end-smoth-scrolling-->
	<!--smooth-scrolling-of-move-up-->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			 */

			$().UItoTop({
				easingType : 'easeOutQuart'
			});

		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span
		id="toTopHover" style="opacity: 1;"> </span></a>
	<!--//smooth-scrolling-of-move-up-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${basePath}/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>